import 'package:film/controller/vip_controller.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class VipScreen extends StatelessWidget {
  final VipController controller = Get.put(VipController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          '会员中心',
          style: TextStyle(color: Colors.white),
        ),
        centerTitle: true,
        backgroundColor: Colors.red,
        leading: IconButton(
          icon: const Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
          ),
          onPressed: () => Get.back(),
        ),
      ),
      body: Obx(() {
        final vip = controller.vip.value;
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 会员信息卡片
            Container(
              margin: const EdgeInsets.all(16),
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(16),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black12,
                    blurRadius: 8,
                    offset: Offset(0, 2),
                  ),
                ],
              ),
              child: Row(
                children: [
                  Icon(Icons.verified, color: Colors.orange, size: 40),
                  const SizedBox(width: 12),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        vip.email,
                        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                      ),
                      const SizedBox(height: 4),
                      Text('开通会员，享受尊贵特权', style: TextStyle(color: Colors.grey)),
                    ],
                  ),
                ],
              ),
            ),
            // 会员权益
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 8),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  _buildRight(Icons.movie, '看剧不限'),
                  _buildRight(Icons.movie_creation, '免广告'),
                  _buildRight(Icons.pets, '专属标识'),
                ],
              ),
            ),
            // 会员服务
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
              child: Text('会员服务', style: TextStyle(fontWeight: FontWeight.bold)),
            ),
            // 会员卡选择
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Obx(() => Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: List.generate(vip.cards.length, (index) {
                      final card = vip.cards[index];
                      final selected = controller.selectedIndex.value == index;
                      return GestureDetector(
                        onTap: () => controller.selectCard(index),
                        child: Container(
                          width: 70,
                          height: 80,
                          margin: const EdgeInsets.symmetric(horizontal: 4),
                          decoration: BoxDecoration(
                            color: selected ? Colors.grey[200] : Colors.white,
                            borderRadius: BorderRadius.circular(12),
                            border: selected ? Border.all(color: Colors.orange, width: 2) : null,
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black12,
                                blurRadius: 4,
                                offset: Offset(0, 2),
                              ),
                            ],
                          ),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Icon(Icons.credit_card, color: Colors.grey),
                              const SizedBox(height: 4),
                              Text(
                                '${card.price}',
                                style: TextStyle(
                                  color: Colors.orange,
                                  fontWeight: FontWeight.bold,
                                  fontSize: 16,
                                ),
                              ),
                              Text(card.name, style: TextStyle(fontSize: 12)),
                            ],
                          ),
                        ),
                      );
                    }),
                  )),
            ),
            // 开通会员按钮
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
              child: SizedBox(
                width: double.infinity,
                height: 48,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.red,
                    shape: StadiumBorder(),
                  ),
                  onPressed: controller.openVip,
                  child: const Text('开通会员',
                      style: TextStyle(
                        fontSize: 16,
                        color: Colors.white,
                      )),
                ),
              ),
            ),
          ],
        );
      }),
    );
  }

  /// 构建会员权益图标和文字
  Widget _buildRight(IconData icon, String text) {
    return Column(
      children: [
        Icon(icon, size: 32, color: Colors.black),
        const SizedBox(height: 4),
        Text(text, style: TextStyle(fontSize: 13)),
      ],
    );
  }
}
